웹 접근성, 웹 표준, 크로스 브라우징에 대하여

2023-01-04

웹 접근성이란?

웹 접근성이란 어떠한 사용자(장애인, 고령자 포함), 어떠한 기술 환경에서도 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 비장애인과 동등하게 접근·이용할 수 있도록 보장해 주는 것이라 정의할 수 있다.

위와 같이 누구나 웹을 어려움 없이 사용할 수 있도록 보장하는 것이 웹 접근성이라고 합니다. 즉, 웹을 인식하고, 이해하고, 내비게이션하고, 상호작용하고, 웹에 기여하고 이 모든 행위가 가능해야 합니다. 무릇, 웹 접근성이란 장애인과 고령자 같은 사람들을 위한 것이구나 생각할 수 있으나, 그렇지만은 않습니다.

예를 들어 종종 유튜브를 볼 때 유튜버의 발음이 부정확해서, 혹은 소음 때문에 뭐라고 말하고 있는지 알아 듣지 못 하는 상황이 발생할 때가 있는데, 이 때 저는 주로 자막을 보고 이해를 하기도 합니다. 그리고 때로는 이어폰을 장시간 꽂는 일이 청각에 너무 많은 자극을 주는 것 같아서 종종 자막만 보면서 시청하곤 하죠.

이렇게 웹 접근성이 좋다면, 장애인에게만 국한된 것이 아니라 그 외 다양한 사람들도 종종 혜택을 얻을 수 있습니다.

이와 같은 리모콘은 누구나 이용하기 쉬울까요? 접근성은 어떨까요? 누구는 리모콘을 보자마자 모든 기능을 파악 가능할 것이고, 누구는 그러지 못 할 것입니다.

이렇게 복잡한 리모콘 때문에 할머니, 할아버지를 위해 위와 같이 리모콘을 만들어주었던 것이 화제가 됐던 적도 있습니다. 이제 어떤 버튼이 어떤 기능을 하는지 훨씬 알아보기 쉬워졌습니다. 이렇게 누구나 사용할 수 있도록 접근성을 높게 만드는 일은 중요합니다.

접근성의 4가지 핵심 원리

WAI(Web Accessibility Initiative)에서는 접근성의 4가지 핵심 원리를 다음과 같이 제시합니다.

🌿 인식의 용이성(perceivable)

웹 사이트에서 제공하는 콘텐츠를 이용하기 위해서는 해당 콘텐츠를 정확히 인식할 수 있어야 한다. 장애 또는 주변 여건 등으로 인하여 인식이 불가능하거나 어려움을 겪는 콘텐츠는 사용자가 그 내용을 동일하게 인식할 수 있도록 추가적인 정보를 함께 제공해야 한다.

잘못된 예:

Information conveyed solely with color
Large pages or large images
Multimedia with no captions
Non-text objects (images, sound, video) with no text alternative

🌿 운용의 용이성(operable)

사용자 인터페이스 구성요소는 조작 가능하고 내비게이션 할 수 있어야 한다. 콘텐츠는 키보드로 접근할 수 있어야 하고, 콘텐츠를 읽고 사용하는 데 충분한 시간을 제공해야 하며, 광과민성발작을 일으킬 수 있는 콘텐츠를 제공하지 않아야 하고, 콘텐츠는 쉽게 내비게이션 할 수 있어야 한다.

잘못된 예:

Missing or inappropriate page title
Special plugin required
Mouse required for interaction and navigation
Non descriptive link label

🌿 이해의 용이성(understandable)

콘텐츠는 이해할 수 있어야 한다. 콘텐츠는 읽고 이해하기 쉬워야 하고, 콘텐츠의 기능과 실행결과는 예측 가능해야 한다며, 콘텐츠는 논리적으로 구성해야 한다. 컨텐츠가 논리적인 순서로 작성되지 않았다면 제공되는 내용을 순차적으로 읽어나가는 시각장애인용 화면 낭독 프로그램에서 내용을 이해하기 어렵게 된다. 마지막으로 입력 오류를 방지하거나 정정할 수 있어야 한다.

잘못된 예:

Long words, long and complex sentences, jargon
Content spawning new windows without warning user
Blinking, moving, scrolling or auto-updating content

🌿 견고성(robust)

웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다. 견고성이란 웹 사이트에서 제공하는 콘텐츠가 현재 사용되고 있는 브라우저나 보조기술 뿐만 아니라 앞으로 개발될 브라우저와 보조기술을 이용하여 사용이 가능해야 한다. 웹 콘텐츠는 마크업 언어의 문법을 준수하고, 웹 애플리케이션은 접근성이 있어야 한다.

잘못된 예:

Invalid or unsupported markup
Scripting required to generate content

왜 웹 접근성을 준수해야 하는가?

첫째, 장애인, 고령자 등을 포함한 웹 이용자의 확대를 들 수 있다.

둘째, 웹 접근성을 준수하는 것이 법률로서 의무화되었다.

셋째, 웹 접근성을 준수하게 되면 디자인 및 설계 등에 대한 효율성을 제고함으로써 비용절감 효과도 있다.

넷째, 공공기관 및 기업의 이미지 제고와 이윤을 창출하기 위해 접근성을 준수할 필요가 있다.

추가적으로 googlebot과 같은 검색엔진에서 찾는 정보들을 명확하게 제시하면 검색 엔진 최적화 효과도 있습니다. 이로 인해 웹 페이지가 검색 결과 페이지에 노출 되면 웹 사이트의 방문자수가 증가하는 이익을 얻을 수 있습니다.

웹 표준이란?

브라우저 종류 및 버전에 따른 기능 차이에 대하여 호환이 가능하도록 제시된 표준으로, 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 동일하게 구현함과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통요소를 사용하여 웹 페이지를 제작하는 기법을 의미한다. 표준화 단체인 W3C(World Wide Consortium)가 권고한 표준안에 따라 웹사이트를 작성할 때 이용하는 HTML, CSS, JavaScript 등에 대한 규정을 담고 있으며 웹 표준의 궁극적인 목적은 웹사이트에 접속한 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 동일한 결과를 보이게 하는 것이다.

웹 표준은 모든 사용자가 웹에 접근할 수 있게 해주며, 웹을 더 즐겁고 빠르게 이용할 수 있도록 도와줍니다. 웹 표준이 존재하지 않으면 개발자는 다양한 브라우저를 지원하기 위해서 각 브라우저 위한 코딩을 하는 데 시간을 쏟아야 합니다. 그리고 이런 상황은 사용자의 접근성을 낮추기 때문에, 그에 따른 손실이 존재합니다. 접근성이 높아야 많은 고객이 유입될 수 있기 때문이죠. 결국 개발자도 사용자도 좋지 않은 경험을 하게 됩니다. 웹 표준을 준수하면 웹 접근성 또한 높아집니다.

웹 표준의 장점

웹발전연구소는 웹 표준의 장점을 다음과 같이 이야기합니다.

🌱 수정 및 운영관리 용이

콘텐츠의 올바른 구조화와 CSS로 시각표현을 통일하여 제어하게 되어 페이지 제작의 부담 감소 및 관리용이

🌱 접근성 향상

웹 표준을 이용해 작성한 문서는 다양한 브라우징 환경에 대응이 가능하며 휴대폰, PDA에서도 정상적인 작동 및 장애인 지원용 프로그램에도 도움이 되므로 사용자나 접속 장치의 접근성이 용이

🌱 검색엔진 최적화(SEO)

구조화된 웹페이지는 검색 로봇 수집을 통해 검색엔진에 효율적으로 노출 될 수 있도록 검색엔진의 검색결과를 최적화

🌱 File Size 축소, 서버 저장 공간 절약

효율적인 소스 작성은 파일 사이즈와 서버공간을 절약할 수 있으며 동시에 화면표시에 소요되는 시간을 단축

🌱 효율적인 마크업

CSS와 HTML문서를 분리하여 제작할 경우 불필요한 마크업이 최소화되어 페이지 로딩속도 향상

🌱 호환성 가능

기존 IE브라우저에서만 작동이 가능했던 요소들이 웹 표준을 준수함으로써 다양한 브라우저 (크롬, 파이어폭스, 사파리, 오페라 등)에서도 작동

W3C 표준

W3C 사이트에서 더 자세한 사항을 확인할 수 있습니다.

HTML(Hypertext Markup Language)

웹 컨텐츠의 내용은 표준 HTML 포맷으로 적용해야 하며 정보가 독점적인 고유 포맷으로 제공되는 경우, HTML 포맷도 제공되어야 한다. 브라우저 호환성은 모든 경우에 있어 고려되어야하며, 웹사이트는 단일 웹 브라우저에 맞추어 제작되어서는 안되며, 클라이언트 그룹에 의해 빈번하게 사용되는 웹 브라우저에서 올바르게 작동해야 한다.

CSS(Cascading Style Sheets)

CSS를 사용한 모든 페이지는 기존 버전과 호환성 되게 어떤 브라우저에서도 내용을 열람할 수 있다. CSS를 이용하여 설계자는 서로 다른화면 해상도와 브라우저 상에서, 테이블 없이도 동일하게 보여질 수 있는 페이지를 생성할 수있다. CSS를 사용하여 생성한 페이지와 템플리트는 다양한 브라우저, 화면 해상도 및 액세스 기술을 사용하여 테스트하여야 한다.

XML(eXtensible Markup Language)

XML 사용 분야를 검토하여 적절한 용도에 맞게 사용하여야 한다. XML은 다양한 인터넷 비즈니스 환경에 손쉽게 적응 가능하다. 데이터 손실 없이 새 운영 체제, 새 애플리케이션 또는 새 브라우저로 쉽게 확장하거나 업그레이드할 수 있다.

DOM(Document Object Model)

W3C DOM, WHATWG DOM 표준은 대부분의 브라우저에서 DOM 을 구현하는 기준이다. 많은 브라우저들이 표준 규약에서 제공하는 기능 외에도 추가적인 기능들을 제공하기 때문에 사용자가 작성한 문서들이 각기 다른 DOM 이 적용된 다양한 브라우저 환경에서 동작할 수 있다는 사실을 항상 인지하고 있어야 한다.

크로스 브라우징이란?

크로스 브라우징이란 표준 웹기술을 사용해 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만들고, 어느 한쪽에 최적화되어 치우지지 않도록 공통 요소를 사용하여 웹페이지를 제작하는 기법을 말하는 것입니다.

브라우저마다 웹 페이지가 다르게 보이는 현상, 한 브라우저에서만 제대로 동작하는 웹 문서 때문에 모든 사용자가 같은 정보를 받아들이지 못 하게 되고 이로인해 격차가 생기기 때문에 크로스 브라우징을 위한 제작을 할 필요가 있는 것이죠. 이러한 문제는 웹 표준을 주도하고 있는 W3C가 제공하는 HTML, XHTML, CSS 등 에 대한 스펙이 매우 상세해진 덕분에 많이 사라지고 있습니다.

크로스 브라우징을 위해 반드시 브라우저마다 100% 똑같은 웹 페이지를 보여줘야 한다는 것이 아닙니다. OS끼리의 차이가 존재하고 HTML 렌더링 엔진이 다르기 때문에 이는 가능하지 않습니다.(HTML 렌더링 엔진이 브라우저마다 달라서 디자인 차이가 발생하는 문제점은 CSS를 사용해 해결하는 방법을 추천합니다)

그럼 브라우저 간의 차이는 어떻게 확인할 수 있을까요? 개발을 하다보면 비교적 최근에 나온 기술은 어떤 브라우저의 호환이 되지 않는 경우가 있다라고 할 때가 있습니다. 어떤 브라우저에서 지원이 되지 않는지 알려주는 사이트들을 이용해 확인할 수 있습니다.

seri-log

웹 접근성, 웹 표준, 크로스 브라우징에 대하여

웹 접근성이란?

접근성의 4가지 핵심 원리

🌿 인식의 용이성(perceivable)

🌿 운용의 용이성(operable)

🌿 이해의 용이성(understandable)

🌿 견고성(robust)

왜 웹 접근성을 준수해야 하는가?

관련 사이트

웹 표준이란?

웹 표준의 장점

🌱 수정 및 운영관리 용이

🌱 접근성 향상

🌱 검색엔진 최적화(SEO)

🌱 File Size 축소, 서버 저장 공간 절약

🌱 효율적인 마크업

🌱 호환성 가능

W3C 표준

관련 사이트

크로스 브라우징이란?

관련 사이트